<template>
  <div class="dashboard-editor-container">
    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
      <span>近七日应用启动次数</span>
      <line-chart :chart-data="appOpenChartData"></line-chart>
    </el-row>
    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
      <span>近七日设备总点击次数</span>
      <line-chart :chart-data="motionChartData"></line-chart>
    </el-row>
  </div>
</template>
<script>
  import LineChart from '../components/sevenDayChart'
  import { getAllAppOpenData, getAllMotionData } from '@/api/monitor'

  export default {
    components: {
      LineChart
    },

    data() {
      return {
        appOpenChartData: {
          days: [],
          sevenDayData: []
        },
        motionChartData: {
          days: [],
          sevenDayData: []
        }
      }
    },
    created() {
      this.getSevenDayData()
    },
    methods: {
      getSevenDayData() {
        var now = new Date()
        var dayTemp = []
        for (var i = 0; i < 7; i++) {
          dayTemp.push(this.getDateFormat(now, 'yyyy-MM-dd'))
          now.setDate(now.getDate() - 1)
        }
        dayTemp.reverse()
        this.appOpenChartData.days = dayTemp
        this.motionChartData.days = dayTemp
        var params = {
          type: 4,
          filter: true,
          particle: 3
        }
        getAllAppOpenData(params).then(response => {
          const result = response.data
          this.appOpenChartData.sevenDayData.splice(0, this.appOpenChartData.sevenDayData.length)
          this.appOpenChartData.days.forEach(key => {
            this.appOpenChartData.sevenDayData.push(result[key] === undefined ? 0 : result[key])
          })
        })
        params = {
          type: 4,
          particle: 3
        }
        getAllMotionData(params).then(response => {
          const result = response.data
          this.motionChartData.sevenDayData.splice(0, this.motionChartData.sevenDayData.length)
          this.motionChartData.days.forEach(key => {
            this.motionChartData.sevenDayData.push(result[key] === undefined ? 0 : result[key])
          })
        })
      },
      getDateFormat(date, fmt) {
        var o = {
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'h+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds(),
          'q+': Math.floor((date.getMonth() + 3) / 3),
          'S': date.getMilliseconds()
        }
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
        }
        for (var k in o) {
          if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
          }
        }
        return fmt
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 30px;
    background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 15px 15px 0;
  }
  }
</style>
